<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        img {
            width: 800px;
            height: 400px;
        }

        /* 图片模块 */
        .wrap {
            position: relative;
            width: 800px;
            height: 400px;

        }

        .list {
            position: relative;
            width: 800px;
            height: 400px;

        }

        .item {
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            opacity: 0;
            transition: all 0.5s;

        }

        .item:nth-child(1) {
            background-color: red;
        }

        .item:nth-child(2) {
            background-color: green;
        }

        .item:nth-child(3) {
            background-color: blue;
        }

        .item:nth-child(4) {
            background-color: yellow;
        }

        .item:nth-child(5) {
            background-color: pink;
        }

        /* 按钮 */
        .btn {
            position: absolute;
            width: 50px;
            height: 100px;
            top: 150px;
            z-index: 100;
        }

        #goPre {
            left: 0;
        }

        #goNext {
            right: 0;
        }

        .item.active {
            z-index: 10;
            opacity: 1;
        }

        /* 小圆点 */
        .pointList {
            position: absolute;
            left: 330px;
            bottom: 50px;
            z-index: 100;
        }

        .point {
            width: 8px;
            height: 8px;
            float: left;
            background-color: rgb(0, 0, 0, 0.2);
            margin: 10px;
            border-radius: 100%;
            border: 2px solid rgb(255, 255, 255, 0.8);
            cursor: pointer;
        }

        .point.active {
            background-color: rgb(255, 255, 255, 0.8);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="list">
            <li class="item active">
                <a href="#">
                    <img src="img/30轮播图淡入淡出/1.png" alt="">
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img src="img/30轮播图淡入淡出/2.jpg" alt="">
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img src="img/30轮播图淡入淡出/3.png" alt="">
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img src="img/30轮播图淡入淡出/4.jpg" alt="">
                </a>
            </li>
            <li class="item">
                <a href="#">
                    <img src="img/30轮播图淡入淡出/5.jpg" alt="">
                </a>
            </li>
        </ul>

        <ul class="pointList">
            <li class="point active" data-index="0"></li>
            <li class="point" data-index="1"></li>
            <li class="point" data-index="2"></li>
            <li class="point" data-index="3"></li>
            <li class="point" data-index="4"></li>
        </ul>

        <button type="button" class="btn" id="goPre">&lt;</button>
        <button type="button" class="btn" id="goNext">&gt;</button>
    </div>

    <script>
        // 获取元素
        var items = document.querySelectorAll('.item');//li
        var points = document.querySelectorAll('.point');
        var goPreBtn = document.querySelector('#goPre');//后退按钮
        var goNextBtn = document.querySelector('#goNext');//前进按钮
        var time = 0;

        // 给一个变量，表示第index张图片
        //也表示第几个point在展示
        var index = 0;

        // 清除所有类active
        var clearActive = function () {
            for (var i = 0; i < items.length; i++) {
                items[i].className = 'item';
            }
            for (var i = 0; i < points.length; i++) {
                points[i].className = 'point';
            }
        }

        // 第index张的类添加active
        var goIndex = function () {
            // 调用清除类active函数
            clearActive();
            // 第index张的类添加active
            items[index].className = 'item active';
            points[index].className = 'point active';
        }

        // 下一张的功能
        var goNext = function () {
            if (index < 4) {
                index++;
            } else {
                index = 0;
            }
            // 调用显示第index张的函数
            goIndex();
        }
        // 上一张
        var goPre = function () {
            if (index > 0) {
                index--;
            } else {
                index = 4;
            }
            // 调用显示第index张的函数
            goIndex();
        }

        // 给按钮绑定事件
        goNextBtn.addEventListener('click', function () {
            goNext();
            // 点击按钮后time重新计数
            time = 0;
        })

        goPreBtn.addEventListener('click', function () {
            goPre();
            // 点击按钮后time重新计数
            time = 0;
        })

        // 小圆点绑定事件
        for (var i = 0; i < points.length; i++) {
            points[i].addEventListener('click', function () {
                var pointIndex = this.getAttribute('data-index');
                // console.log(typeof (pointIndex));
                index = pointIndex;
                goIndex();

                // 点击小圆点后time重新计数
                time = 0;

            })
        }

        // 设置自动播放
        var timer = setInterval(function () {
            if (time == 1) {
                goNext();
                time = 0;
            } else {
                time++;
            }
        }, 1000);


    </script>
</body>

</html>